import React from 'react';
import { observer } from 'mobx-react';
import Input from '../../../view/view-input';
import { ColumnProps } from '../../../stores/mobxTable/table';
import {SelectNew} from 'antd';
import $ from "jquery";

const Option = SelectNew.Option;
interface Props {
    editable?: boolean;
    value?: number;
    propsChange: (propName: string, propValue: any) => void;
    getProps:(propsName?:string)=>any;
    onChange: (string) => void;
    toReadonly: () => void;
    addonBefore?: ColumnProps;
    row?: any;
    field:any;
    disabled?:boolean;
}

@observer
export default class InputPopover extends React.Component<Props, any> {
    constructor(props){
        super(props);
        const { column, row } = props;
        this.state={hide:column&&column.isHide&&column.isHide(row)};
    }
    getTopWidth = () => {
        if (this.refs._container) {
            const closesttd = $(this.refs._container).closest('td');
            const offset:any = closesttd.offset();
            const offset1:any = closesttd.closest('table').offset();
            const width = Math.max(document.documentElement.clientWidth - offset.left - 20, 200);
            return {
                top: offset.top - offset1.top + 8,
                left: offset.left - offset1.left + 8,
                width
            }
        }
    }
    render() {
        const { row, addonBefore, field } = this.props;
        let selectBefore: any = null;
        if (addonBefore) {
            const { options = [], width, key } = addonBefore;
            const bind = row.$(key).bind();
            selectBefore = (
                <SelectNew style={{ width }} {...bind} onChange={(v) => {
                    bind.onChange(v);
                    setTimeout(() => {
                        const filered = options.filter(d => d.key == v);
                        if (filered && filered.length > 0) {
                            if ('defaultValue' in filered[0]) {
                                this.props.onChange(filered[0].defaultValue)
                            }
                            if ('inputDisable' in filered[0]) {
                                field.set('disabled', !!filered[0].inputDisable)
                            } else {
                                field.set('disabled', false);
                            }
                        } else {
                            field.set('disabled', false); 
                        }
                    }, 10);
                }}>
                    {
                        options.map(opt => (
                            <Option value={opt.key}>{opt.showname}</Option>
                        ))
                    }
                </SelectNew>
            );
        }
        return (
            <div style={this.state.hide?{display:"none"}:{display:"block"}}>
                <span ref="_container">
                    {
                        this.props.editable&&!this.props.disabled ?
                            <Input
                                value={this.props.value}
                                disabled={this.props.disabled}
                                autoFocus={!selectBefore}
                                addonBefore={selectBefore}
                                onChange={(e) => { this.props.onChange(e.target.value) }}
                                style={{ position: 'absolute', top: 8, zIndex: 1000, ...this.getTopWidth() }}
                            />
                            : <Input wrapperClassName="no-border" disabled={this.props.disabled} addonBefore={selectBefore} value={this.props.value}></Input>
                    }
                </span>
            </div>
        )
    }
}

